<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Foo</title>
  <link href="http://example.com/foo" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1>Foo</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Test of markdown constructs</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#a"><span class="secno">1</span> <span class="content">Double-Underline Heading</span></a>
     <ol class="toc">
      <li><a href="#b"><span class="secno">1.1</span> <span class="content">Single-Underline Heading</span></a>
     </ol>
    <li>
     <a href="#c"><span class="secno">2</span> <span class="content">One-Hash Heading</span></a>
     <ol class="toc">
      <li>
       <a href="#d"><span class="secno">2.1</span> <span class="content">Two-Hash Heading</span></a>
       <ol class="toc">
        <li>
         <a href="#e"><span class="secno">2.1.1</span> <span class="content">Three-Hash Heading</span></a>
         <ol class="toc">
          <li>
           <a href="#f"><span class="secno">2.1.1.1</span> <span class="content">Four-Hash Heading</span></a>
           <ol class="toc">
            <li><a href="#g"><span class="secno">2.1.1.1.1</span> <span class="content">Five-Hash Heading</span></a>
           </ol>
         </ol>
       </ol>
     </ol>
    <li><a href="#tight-bulleted-list"><span class="secno">3</span> <span class="content">Tight Bulleted List</span></a>
    <li><a href="#loose-bulleted-list"><span class="secno">4</span> <span class="content">Loose Bulleted List</span></a>
    <li><a href="#list-with-paragraphs"><span class="secno">5</span> <span class="content">List With Paragraphs</span></a>
    <li><a href="#nested-lists"><span class="secno">6</span> <span class="content">Nested Lists</span></a>
    <li><a href="#nested-lists-with-opening-text"><span class="secno">7</span> <span class="content">Nested Lists with Opening Text</span></a>
    <li><a href="#numbered-list"><span class="secno">8</span> <span class="content">Numbered List</span></a>
    <li><a href="#mixed-lists"><span class="secno">9</span> <span class="content">Mixed Lists</span></a>
    <li><a href="#dl"><span class="secno">10</span> <span class="content">DL</span></a>
    <li><a href="#paragraphs-in-lists"><span class="secno">11</span> <span class="content">Paragraphs In Lists</span></a>
    <li><a href="#interruptible-paragraphs"><span class="secno">12</span> <span class="content">Interruptible Paragraphs</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="a"><span class="secno">1. </span><span class="content">Double-Underline Heading</span><a class="self-link" href="#a"></a></h2>
   <p>text</p>
   <h3 class="heading settled" data-level="1.1" id="b"><span class="secno">1.1. </span><span class="content">Single-Underline Heading</span><a class="self-link" href="#b"></a></h3>
   <p>text</p>
   <h2 class="heading settled" data-level="2" id="c"><span class="secno">2. </span><span class="content">One-Hash Heading</span><a class="self-link" href="#c"></a></h2>
   <p>text</p>
   <h3 class="heading settled" data-level="2.1" id="d"><span class="secno">2.1. </span><span class="content">Two-Hash Heading</span><a class="self-link" href="#d"></a></h3>
   <p>text</p>
   <h4 class="heading settled" data-level="2.1.1" id="e"><span class="secno">2.1.1. </span><span class="content">Three-Hash Heading</span><a class="self-link" href="#e"></a></h4>
   <p>text</p>
   <h5 class="heading settled" data-level="2.1.1.1" id="f"><span class="secno">2.1.1.1. </span><span class="content">Four-Hash Heading</span><a class="self-link" href="#f"></a></h5>
   <p>text</p>
   <h6 class="heading settled" data-level="2.1.1.1.1" id="g"><span class="secno">2.1.1.1.1. </span><span class="content">Five-Hash Heading</span><a class="self-link" href="#g"></a></h6>
   <p>text</p>
   <p>###### Six-Hash Not-A-Heading ###### {#h}</p>
   <h2 class="heading settled" data-level="3" id="tight-bulleted-list"><span class="secno">3. </span><span class="content">Tight Bulleted List</span><a class="self-link" href="#tight-bulleted-list"></a></h2>
   <ul>
    <li data-md>
     <p>one</p>
    <li data-md>
     <p>two</p>
    <li data-md>
     <p>three</p>
   </ul>
   <h2 class="heading settled" data-level="4" id="loose-bulleted-list"><span class="secno">4. </span><span class="content">Loose Bulleted List</span><a class="self-link" href="#loose-bulleted-list"></a></h2>
   <ul>
    <li data-md>
     <p>one</p>
    <li data-md>
     <p>two</p>
    <li data-md>
     <p>three</p>
   </ul>
   <h2 class="heading settled" data-level="5" id="list-with-paragraphs"><span class="secno">5. </span><span class="content">List With Paragraphs</span><a class="self-link" href="#list-with-paragraphs"></a></h2>
   <ul>
    <li data-md>
     <p>one
one
one</p>
     <p>another paragraph
one
one</p>
    <li data-md>
     <p>two</p>
   </ul>
   <h2 class="heading settled" data-level="6" id="nested-lists"><span class="secno">6. </span><span class="content">Nested Lists</span><a class="self-link" href="#nested-lists"></a></h2>
   <ul>
    <li data-md>
     <p>one</p>
     <ul>
      <li data-md>
       <p>nested one</p>
      <li data-md>
       <p>nested two</p>
     </ul>
    <li data-md>
     <ul>
      <li data-md>
       <p>nested one</p>
      <li data-md>
       <p>nested two</p>
     </ul>
    <li data-md>
     <ul>
      <li data-md>
       <p>nested one</p>
      <li data-md>
       <p>nested two</p>
     </ul>
   </ul>
   <h2 class="heading settled" data-level="7" id="nested-lists-with-opening-text"><span class="secno">7. </span><span class="content">Nested Lists with Opening Text</span><a class="self-link" href="#nested-lists-with-opening-text"></a></h2>
   <ul>
    <li data-md>
     <p>one</p>
     <ul>
      <li data-md>
       <p>nested one</p>
      <li data-md>
       <p>nested two</p>
     </ul>
    <li data-md>
     <p>two</p>
   </ul>
   <h2 class="heading settled" data-level="8" id="numbered-list"><span class="secno">8. </span><span class="content">Numbered List</span><a class="self-link" href="#numbered-list"></a></h2>
   <ol>
    <li data-md>
     <p>one</p>
    <li data-md>
     <p>two</p>
    <li data-md>
     <p>three</p>
   </ol>
   <h2 class="heading settled" data-level="9" id="mixed-lists"><span class="secno">9. </span><span class="content">Mixed Lists</span><a class="self-link" href="#mixed-lists"></a></h2>
   <ol>
    <li data-md>
     <p>numbered one</p>
     <ul>
      <li data-md>
       <p>bulleted one</p>
     </ul>
    <li data-md>
     <p>numbered two</p>
     <ul>
      <li data-md>
       <p>bulleted two</p>
     </ul>
   </ol>
   <h2 class="heading settled" data-level="10" id="dl"><span class="secno">10. </span><span class="content">DL</span><a class="self-link" href="#dl"></a></h2>
   <dl>
    <dt data-md>foo
    <dd data-md>
     <p>foo stuff</p>
    <dt data-md>bar
    <dd data-md>
     <p>more bar stuff
continues on the next line</p>
    <dt data-md>baz
    <dt data-md>baz2
    <dd data-md>
     <dl>
      <dt data-md>nested foo
      <dd data-md>
       <p>nested foo stuff</p>
     </dl>
   </dl>
   <h2 class="heading settled" data-level="11" id="paragraphs-in-lists"><span class="secno">11. </span><span class="content">Paragraphs In Lists</span><a class="self-link" href="#paragraphs-in-lists"></a></h2>
   <dl>
    <dt>foo 
    <dd>
      First para.
		Two lines. 
     <p>Second para.
		Two lines.</p>
   </dl>
   <h2 class="heading settled" data-level="12" id="interruptible-paragraphs"><span class="secno">12. </span><span class="content">Interruptible Paragraphs</span><a class="self-link" href="#interruptible-paragraphs"></a></h2>
   <p>foo foo foo</p>
   <ul>
    <li data-md>
     <p>one</p>
   </ul>
   <p>foo foo foo</p>
   <ol>
    <li data-md>
     <p>one</p>
   </ol>
   <p>foo foo foo</p>
   <div>div</div>
   <p>foo foo foo</p>
   <dl>
    <dt data-md>dt
   </dl>
   <ol>
    <li data-md>
     <p>foo</p>
     <ul>
      <li data-md>
       <p>one</p>
     </ul>
   </ol>
  </main>